<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }">
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view v-else>
            <view class="order-main">
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>收货信息</view>
                    </view>
                    <view class="order-user">
                        <view class="user-info">
                            <view class="user-info-name"
                                ><image src="/pages_supplier/static/icon/map.png"></image>{{ data.ContactName }}
                                {{ data.ContactTel }}</view
                            >
                            <text class="user-info-location">{{ data.ContactAddress }}</text>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>物流信息</view>
                    </view>
                    <view class="wuliu_info">
                        <view>
                            <view class="label">配送方式：</view>
                            <view @click="selExpress" class="value">
                                <view :class="type == '请选择快递公司' ? 'color-gray-light' : ''">{{ type }}</view>
                                <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                            </view>
                        </view>
                        <view v-if="expressId != 47"
                            ><!--tms配送-->
                            <view class="label">快递单号：</view>
                            <view class="value">
                                <view
                                    ><input
                                        type="text"
                                        placeholder="请输入您的快递单号"
                                        placeholder-style="font-size:28rpx;color:#999;"
                                        v-model="tracking"
                                /></view>
                                <iconsfont
                                    @click="scanCodeFn"
                                    customIcons="icon-saoyisao"
                                    :color="'#333333'"
                                    style="margin-left: 24rpx"
                                    size="36"></iconsfont>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>发货信息</view>
                    </view>
                    <view class="order-user">
                        <view class="user-info" @click="selAddress">
                            <view class="flex-between"
                                ><view class="user-info-name"
                                    >{{ defaultAddress.ContactName }} {{ defaultAddress.ContactTel }}</view
                                ><uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons
                            ></view>
                            <text class="user-info-location">{{ defaultAddress.Address }}</text>
                        </view>
                    </view>
                </view>
                <view class="deliver_product">
                    <view class="deliver_product_list" v-for="(item, index) in data.BuyOrderDetailList" :key="index">
                        <view class="no">货号：{{ item.SkuCode }}</view>
                        <view class="list_info">
                            <image :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill"></image>
                            <view class="list_info_r">
                                <view class="name text-show-line-2">{{ item.ProductName }}</view>
                                <view v-if="item.Attribute || item.DisplayAttribute"
                                    >规格：{{ item.Attribute ? item.Attribute : item.DisplayAttribute }}</view
                                >
                                <view class="flex-between"
                                    ><view>数量：{{ item.Amount }}{{ item.UnitName }}</view
                                    ><view>已出库：{{ item.SendAmount }}{{ item.UnitName }}</view></view
                                >
                            </view>
                        </view>
                        <view class="list_info_b"
                            >本次出库：<input
                                type="number"
                                v-model="item.InputAmount"
                                @blur="max(item)"
                                placeholder="请输入数量"
                                placeholder-style="color:#999;" />{{ item.UnitName }}</view
                        >
                    </view>
                </view>
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>订单信息</view>
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <text class="label">采购单号：</text>
                            <text class="value">{{ data.BuyOrdno }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">下单时间：</text>
                            <text class="value">{{ data.AddTime }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.OrdSn">
                            <text class="label">销售订单：</text>
                            <text class="value">{{ data.OrdSn }}</text>
                        </view>
                        <view class="order-info-item" v-if="data.Remark">
                            <text class="label">订单备注：</text>
                            <text class="value">{{ data.Remark }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-bottom-bar" v-if="!isLoading && isShowBottomBar">
            <view class="order-state-menu bigbtn">
                <text class="btn btn-success-hollow" @click="deliver">发货</text>
            </view>
        </view>
        <uni-popup type="bottom" ref="expressage" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择快递公司</text></view>
                <scroll-view scroll-y="true" class="pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in expressList" @click="select(item, index)">
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="addresslist" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择发货信息</text></view>
                <scroll-view scroll-y="true" class="add-pay-way-scroll">
                    <view class="pay-way">
                        <view
                            class="pay-way-item"
                            v-for="(item, index) in deliverData"
                            @click="selectaddress(item, index)">
                            <text>{{ item.ContactName }} {{ item.ContactTel }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="canceladdresslist">取消</button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import orderPrice from "@/pages_supplier/components/order/order-price.vue"
import orderStateMenu from "@/pages_supplier/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_supplier/components/order/item-title-border.vue"
import { GetSendOrderDetailById, SendBuyOrdOut } from "@/pages_supplier/service/api/buyOrder.js"
import { GetExpressList } from "@/pages_supplier/service/api/exChange.js"
import { GetAddressList } from "@/pages_supplier/service/api/supplier.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            buyOrdId: "",
            ordId: "",
            state: "",
            type: "请选择快递公司",
            expressList: [],
            tracking: "",
            isShowBottomBar: false,
            id: 0,
            allPayPic: 0,
            data: {},
            detailList: [],
            isLoading: false,
            imgs: [],
            showImgs: [],
            statelist: [],
            stateCurrent: 0,
            listData: {},
            systemInfo: {},
            expressId: 0,
            deliverData: [],
            defaultAddress: {},
        }
    },
    onLoad(e) {
        this.buyOrdId = e.buyOrdId
        this.ordId = e.ordId
        this.state = e.state
    },
    mounted() {
        this.getDetail()
        this.getAddress()
        this.isShowBottomBar = true
        this.systemInfo = uni.getSystemInfoSync()
        console.log(this.systemInfo)
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        //获取详情
        getDetail() {
            let path = "?buyOrdId=" + this.buyOrdId + "&ordId=" + this.ordId
            this.isLoading = true
            GetSendOrderDetailById(path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.data.BuyOrderDetailList.forEach((e) => {
                        e.InputAmount = e.WaitAmount
                        // if(e.Amount - e.SendAmount > 0){
                        // 	e.InputAmount = e.Amount - e.SendAmount
                        // }else{
                        // 	e.InputAmount = e.Amount
                        // }
                    })
                    this.getExpList()
                    this.isLoading = false
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getAddress() {
            GetAddressList().then((res) => {
                this.deliverData = res.Data
                let defaultAddress = {}
                let defaultNum = 0
                res.Data.forEach((e) => {
                    if (e.IsDefault == true) {
                        defaultNum++
                        defaultAddress = e
                    }
                })
                if (defaultNum == 0) {
                    this.defaultAddress = this.deliverData[0]
                } else {
                    this.defaultAddress = defaultAddress
                }
            })
        },
        getExpList() {
            let path = "?isRefund=true"
            GetExpressList(path).then((res) => {
                this.express = res.Data
                res.Data.forEach((e) => {
                    this.expressList.push(e.Name)
                })
                console.log(this.expressList)
            })
        },
        selExpress() {
            this.$refs.expressage.open()
        },
        cancel() {
            this.$refs.expressage.close()
        },
        selAddress() {
            this.$refs.addresslist.open()
        },
        canceladdresslist() {
            this.$refs.addresslist.close()
        },
        select(item, index) {
            this.type = item
            this.expressId = this.express[index].ID
            console.log(this.expressId)
            this.$refs.expressage.close()
        },
        selectaddress(item, index) {
            this.defaultAddress = item
            this.$refs.addresslist.close()
        },
        scanCodeFn() {
            //扫一扫
            //#ifdef MP||APP-PLUS
            // 允许从相机和相册扫码
            let that = this
            uni.scanCode({
                success: function (res) {
                    if (res.result) {
                        console.log(res.result)
                        that.tracking = res.result
                    }
                },
            })
            //#endif
            // this.scanPay('00068')
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        max(e) {
            if (parseInt(e.InputAmount) > parseInt(e.Amount) - parseInt(e.SendAmount)) {
                e.InputAmount = e.Amount - e.SendAmount
                this.$forceUpdate()
            }
        },
        deliver() {
            if (this.expressId == 0) {
                this.easyToast("请选择配送方式")
                return false
            }
            if (this.expressId != 47 && this.tracking == "") {
                this.easyToast("请填写快递单号")
                return false
            }
            let num = 0
            this.data.BuyOrderDetailList.forEach((e) => {
                e.InputAmount = parseInt(e.InputAmount)
                num = num + parseInt(e.InputAmount)
            })
            if (num == 0) {
                this.easyToast("请填写商品出库数量")
                return false
            }
            this.data.ExpressId = this.expressId
            this.data.ExpressName = this.type
            this.data.ExpressNo = this.tracking
            this.data.SendAddressId = this.defaultAddress.ID
            console.log(this.data)

            SendBuyOrdOut(this.data).then((res) => {
                if (res.State == 1) {
                    this.easyToast("发货成功")
                    this.UP_ORDER_VIEW(new Date().getTime())
                    setTimeout((e) => {
                        if (this.state == 3) {
                            this.goUrl("/pages_supplier/packet/order/index?tabIndex=2")
                        } else if (this.state == 4) {
                            this.goUrl("/pages_supplier/packet/order/index?tabIndex=3")
                        }
                    }, 2000)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 8rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        padding-left: 24rpx;
        padding-right: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
        margin-left: -24rpx;
        margin-right: -24rpx;
        color: $color-gray-1;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-main {
    padding: $app-page-padding $app-page-padding 0;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        // padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-text-mian;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
                display: flex;
                align-items: center;
                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 14rpx;
                }
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
                color: $color-gray-3;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-text-mian;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;
}

.ptb0 {
    padding-bottom: 0 !important;
}
.wuliu_info {
    margin: -24rpx 0;
    & > view {
        display: flex;
        height: 98rpx;
        align-items: center;
    }
    .label {
        font-size: 28rpx;
        color: #333;
    }
    .color-gray-light {
        color: $color-gray-3;
    }
    .value {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        & > view {
            flex: 1;
        }
    }
}
.deliver_product {
    padding: 0 24rpx;
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    .deliver_product_list {
        padding: 24rpx 0;
        border-bottom: 2rpx solid $uni-border-bottom-color;
        .no {
            font-size: 28rpx;
            color: #0091ff;
        }
        .list_info {
            padding: 16rpx 0;
            display: flex;
            .list_info_r {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 24rpx;
                color: $color-gray-3;
                .name {
                    font-size: 26rpx;
                    color: $color-gray-1;
                }
            }
            image {
                width: 160rpx;
                height: 160rpx;
                border-radius: 8rpx;
                border: 1rpx solid #f4ea71;
                margin-right: 24rpx;
            }
        }
        .list_info_b {
            font-size: 26rpx;
            color: $color-gray-1;
            font-weight: bold;
            display: flex;
            align-items: center;
            input {
                width: 350rpx;
                height: 64rpx;
                background: #f5f5f5;
                border-radius: 4rpx;
                padding-left: 16rpx;
                font-weight: normal;
                margin-right: 16rpx;
                font-size: 28rpx;
            }
        }
    }
    .deliver_product_list:last-child {
        border: none;
    }
}
.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
        height: 58rpx;
        font-size: 24rpx;
        min-width: 100rpx;
    }
    .btn-gray {
        border-color: #222a42;
        color: #222a42;
    }
}
.bigbtn {
    flex: 1;
    justify-content: center;
    .btn {
        width: 304rpx;
        height: 80rpx;
        background: $app-color-main;
        margin: 0;
        border-radius: 40rpx;
        padding: 0;
        font-size: 28rpx;
        margin: 0 24rpx;
        color: #ffffff;
    }
    .btn-gray {
        background: #ffffff;
        border: 1rpx solid $app-color-main;
        color: $app-color-main;
    }
}
.add-pay-way-scroll {
    max-height: 50vh;
}
.pay-way-scroll {
    height: 40vh;
}
</style>
